<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>入库列表</title>
    <script type="text/javascript" src="/js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js" ></script>
    <link  rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <style>
        span{
            color: #1EABFF;
            padding: 0 5px;
        }
    </style>
</head>
<body>
<form id="myForm" class="form-horizontal">
    <h2>入库列表</h2>
    <div class="searchDiv">
        商品编号:<input name="p_id" placeholder="商品编号"/>
        仓库名:<input name="w_name" placeholder="仓库名"/>
        入库时间:<input name="beginDate" type="date"/> - <input name="endDate" type="date"/>
        <button type="button" onclick="loadData()" class="btn btn-info">查询</button>
        <button type="reset" class="btn btn-warning">重置</button>
    </div>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>入库单号</th>
            <th>商品编号</th>
            <th>商品名</th>
            <th>仓库名</th>
            <th>入库数</th>
            <th>入库时间</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tboby">
        </tbody>
    </table>
    <!--分页部分-->
    <div class="form-group">
        <div class="col-sm-3" style="text-align: right">
            <ul class="pagination" style="margin: 0;">
                <li name="pageLi" id="firstPage"><a href="javascript:void(0)">首页</a></li>
                <li name="pageLi" id="prePage"><a href="javascript:void(0)">上一页</a></li>
                <li name="pageLi" id="nextPage"><a href="javascript:void(0)">下一页</a></li>
                <li name="pageLi" id="lastPage"><a href="javascript:void(0)">末页</a></li>
            </ul>
        </div>
        <label class="control-label col-sm-3" style="text-align: right" >
            共<span id="total"></span>条数据，共<span id="pages"></span>页
        </label>
        <label class="control-label col-sm-1" style="text-align: right" >
            每页显示
        </label>
        <div   class="col-sm-1" style="text-align: right; padding:0;margin: 0" >
            <select class="form-control" name="pageSize">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
            </select>
        </div>
        <label class="control-label col-sm-1" style="text-align: left;width: 87px;padding: 8px 5px;" >
            条数据
        </label>
        <label class="control-label col-sm-1" style="text-align: right" >
            跳转到第
        </label>
        <div   class="col-sm-1" style="text-align: right; padding:0;margin: 0" ><input class="form-control" name="pageNum" value="1" /></div>
        <label class="control-label col-sm-1" style="text-align: left">页</label>
    </div>
</form>
</body>

</html>
<script>
    //页面加载完毕之后发送异步请求
    $(function(){
        loadData();
        $("ul[class='pagination']>li").click(function(){
            if(($(this).attr("class"))=='disabled')
                return;
            let num=$(this).attr("name");
            $("input[name='pageNum']").val(num);
            loadData();
        });
    });
    //填充分页信息
    function fillPageData(pageInfo) {
        //填充信息
        $("#total").html(pageInfo.total);
        $("#pages").html(pageInfo.pages);
        $("input[name='pageNum']").val(pageInfo.pageNum);
        $("select[name='pageSize']").val(pageInfo.pageSize);
        //设置按钮的属性值和样式
        $("#firstPage").attr("name",1);
        $("#prePage").attr("name",pageInfo.prePage);
        $("#nextPage").attr("name",pageInfo.nextPage);
        $("#lastPage").attr("name",pageInfo.pages);
        $("#firstPage").removeClass("disabled");
        $("#prePage").removeClass("disabled");
        $("#nextPage").removeClass("disabled");
        $("#lastPage").removeClass("disabled");
        if(pageInfo.isFirstPage){//如果是第一页：上一页和首页禁用
            $("#firstPage").addClass("disabled");
            $("#prePage").addClass("disabled");
        }
        if(pageInfo.isLastPage){//如果已经是最后一页：下一页和末页禁用
            $("#nextPage").addClass("disabled");
            $("#lastPage").addClass("disabled");
        }
    }
    //更新按钮
    function updateInpstock(in_num) {
        window.location.href="/pages/inpstock/update.html?in_num="+in_num;
    }
    //删除按钮
    function deleteInpstock(in_num) {
        if(confirm("确定要删除吗?")) {
            //发起异步请求
            $.ajax({
                type: "POST",
                url: "/inpstock/" + in_num, //RESTful风格的API定义
                data: "_method=DELETE",
                success: function (vo) {
                    if(vo.code==200){
                        loadData();
                    }else{
                        alert("删除失败！"+vo.msg);
                    }
                }
            });
        }
    }
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }

    //加载数据
    function loadData(){
        //alert($("#myForm").serialize())
        $.ajax({
            type: "GET",
            url: "/inpstock/list",
            data: $("#myForm").serialize(),//主要是分页和多条件参数数据
            dataType:"json",
            success: function(vo){
                //alert( "Data Saved: " + vo );
                let list=vo.pageInfo.list;
                let str="";
                for(let i=0;i<list.length;i++){

                    let obj=list[i];
                    let in_num=obj.in_num;
                    let in_id=obj.in_id;
                    let in_number=obj.in_number;
                    //替代 空 替代t
                    let in_time=obj.in_time.replace("T",' ');
                    let in_remarks=obj.in_remarks==null?"-":obj.in_remarks;
                    let w_name=obj.w_name;
                    let p_name=obj.p_name==null?"-":obj.p_name;
                    let p_id=obj.p_id;
                    let btnStr="";
                        btnStr=
                            '<button type="button" name="deleteBtn" class="btn btn-sm btn-danger" onclick="deleteInpstock('+in_num+')">删除</button>&nbsp;' +
                            '<button type="button" name="updateBtn" class="btn btn-sm btn-info" onclick="updateInpstock('+in_num+')">更新</button>&nbsp;';
                    str+='<tr>' +
                        '            <td>'+in_id+'</td>' +
                        '            <td>'+p_id+'</td>' +
                        '            <td>'+p_name+'</td>' +
                        '            <td>'+w_name+'</td>' +
                        '            <td>'+in_number+'</td>' +
                        '            <td>'+in_time+'</td>' +
                        '            <td>'+in_remarks+'</td>' +
                        '            <td>'+btnStr+'</td>' +
                        '</tr>'
                }
                $("#tboby").html(str);
                //填充分页数据
                fillPageData(vo.pageInfo);
            }
        });
    }
</script>
